<template>
<div>
  <div class="table-data">
    <div class="search-box" v-if="manage=='admin'">
      <el-select v-model="searchMap.cate_id" clearable placeholder="商家类型">
        <el-option v-for="item in businessTypeList" :label="item.name" :key="item.id" :value="item.id"></el-option>
      </el-select>
      <el-input size="small" v-model="searchMap.keyword" placeholder="商家名称"></el-input>
      <!-- <el-input size="small" v-model="searchMap.name" placeholder="昵称"></el-input> -->
      <el-select v-model="searchMap.status" clearable placeholder="状态">
        <el-option label="待审核" value="wait"></el-option>
        <el-option label="运营拒绝" value="refuse"></el-option>
        <el-option label="待财务审核" value="finance_wait"></el-option>
        <el-option label="财务拒绝" value="finance_refuse"></el-option>
        <el-option label="已打款" value="complete"></el-option>
      </el-select>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div>
    <div class="search-box" v-if="manage=='shop'">
      <span style="margin-right:10px">可提现金额：{{shopConfig.valid_amount}}  </span>
      <el-button v-if="shopConfig.valid_amount>0" size="small" type="primary" icon="el-icon-search" @click="handleProduct(1,2)">申请提现</el-button>
    </div>
    <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" style="width:100%" :height="tHeight" class="table-box">
      <el-table-column label="id" prop="id" width="80"></el-table-column>
      <el-table-column label="商家名称" v-if="manage=='admin'" prop="shop_name"></el-table-column>
      <el-table-column label="商家类型" v-if="manage=='admin'" prop="cate_name"></el-table-column>
      <el-table-column label="提现人" v-if="manage=='admin'" prop="member"></el-table-column>
      <el-table-column label="申请提现金额" prop="amount"></el-table-column>
      <el-table-column label="费率/手续费" prop="rate">
        <template slot-scope="scope">
          {{scope.row.rate}} / {{(scope.row.amount  * scope.row.rate).toFixed(2)}} 元
        </template>
      </el-table-column>
      <el-table-column label="实际结算金额" v-if="manage=='admin'" prop="real_amount"></el-table-column>
      <el-table-column label="提现状态" prop="status_txt" width="80"></el-table-column>
      <el-table-column label="申请时间" prop="create_time" width="160"></el-table-column>
      <el-table-column label="操作" width="260">
        <template slot-scope="scope">
          <button  v-if="scope.row.status!=='finance_refuse' && scope.row.status !== 'refuse' "  @click="handleProduct(2,scope.row)" class="butt-min">提现产品</button>
          -
          <button v-if="scope.row.status!=='finance_refuse' && scope.row.status !== 'refuse' "  @click="handleCashier(scope.row)" class="butt-min">收银台明细</button>
          -
          <button  @click="handleDetail(scope.$index,scope.row)" class="butt-min">详情</button>
          <!-- <i v-if="(scope.row.status=='wait'||scope.row.status=='finance_wait') && manage=='admin'">-</i> -->
          <button v-if="scope.row.status=='wait' && manage=='admin'" @click="handleOperate(scope.$index,scope.row)" class="butt">运营审核</button>
          <button v-if="scope.row.status=='finance_wait' && manage=='admin'" @click="handleFinance(scope.$index,scope.row)" class="butt">财务审核</button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
    <ProductDialog :isProduct="isProduct" :form="prdData" @closeDialog="closeDialog" @loadData="loadData"></ProductDialog>
    <CashierDialog :isCashier="isCashier" :form="cashierData" @closeDialog="closeDialog" @loadData="loadData"></CashierDialog>
    <DetailDialog :isDetail="isDetail" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></DetailDialog>
    <OperateDialog :isOperate="isOperate" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></OperateDialog>
    <FinanceDialog :isFinance="isFinance" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></FinanceDialog>
  </div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import settlementApi from "@/api/settlement"

import ProductDialog from "./ProductDialog.vue";
import CashierDialog from "./CashierDialog.vue";
import DetailDialog from "./DetailDialog.vue";
import FinanceDialog from "./FinanceDialog.vue";
import OperateDialog from "./OperateDialog.vue";
import businessApi from "@/api/business";

@Component({
  components: {ProductDialog,DetailDialog,FinanceDialog,OperateDialog,CashierDialog }
})
export default class businessExamine extends Vue {
  // @Getter("user") getUser: any;
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() isProduct: Boolean = false; // 是否展示添加弹窗
  @Provide() isCashier: Boolean = false; // 是否展示添加弹窗
  @Provide() isDetail: Boolean = false; // 是否展示编辑弹窗
  @Provide() isFinance: Boolean = false; // 是否展示编辑弹窗
  @Provide() isOperate: Boolean = false; // 是否展示编辑弹窗
  @Provide() businessTypeList: any = []; // 商家类型
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() searchData: any = {
    pageNum: 1
  };

  @Provide() formData: any = {};
  @Provide() prdData: any = [];
  @Provide() cashierData: any = [];
  @Provide() searchMap:{
    cate_id: any,
    keyword:string,
    name:string,
    status:string,
  }={
    cate_id:"",
    keyword:"",
    name:"",
    status:""
  }
  @Provide() manage: any = '';//管理员
  @Provide() serviceAmount: any = '' //商家端可申请提现手续费
  @Provide() actualAmount: any = '' //商家端实际到账金额
  @Provide() shopConfig: any = {} //商家配置
 // 提现
 headClass() {
            return "text-align: center;background:#eef1f6;";
        }
  handleProduct(i:any,row:any){
    if(this.manage=='admin'){
      this.isProduct=true;
      settlementApi.busSettWithdrawal(row.id)
        .then((res: any) => {
          this.prdData=res.data.data
        });
    }else{
      if(i==1){
        this.serviceAmount = (this.shopConfig.valid_amount*this.shopConfig.config.rate).toFixed(2);
        this.actualAmount = (this.shopConfig.valid_amount-this.serviceAmount).toFixed(2)
        this.$confirm('确定要申请提现'+this.shopConfig.valid_amount+'元吗？本次手续费'+this.shopConfig.config.rate+'（'+this.serviceAmount+'元），实际到账'+this.actualAmount+'元。', '申请提现', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal:false
        }).then(() => {
          settlementApi.withdraw()
          .then((res: any) => {
            if(res.data.status){
              this.$message({
                message: '申请成功',
                type: "success"
              });
              this.Withdrawable()
              this.loadData();
            } else {
              this.$message({
                type: 'info',
                message: res.msg
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提现'
          });          
        });
      }else{
        this.isProduct=true;
        settlementApi.busWithdrawPrd(row.id)
        .then((res: any) => {
          this.prdData=res.data.data
        });
      }
    }
  }
  // 详情
  handleDetail(index: number, row: any){
    this.isDetail=true;
    this.formData=row
  }
  handleCashier(row){
    this.isCashier=true;
        settlementApi.busWithdrawCashier(row.id)
        .then((res: any) => {
          this.cashierData=res.data.data
        });
  }
  // 运营
  handleOperate(index: number, row: any){
    this.isOperate=true;
    this.formData=row
  }
  // 财务
  handleFinance(index: number, row: any){
    this.isFinance=true;
    this.formData=row
  }
  // 关闭弹窗
  closeDialog() {
    this.isProduct = false;
    this.isCashier = false;
    this.isDetail = false;
    this.isOperate = false;
    this.isFinance = false;
    this.loadData();
  }

  created() {
    // 判断管理员权限
    let manage:any=localStorage.getItem('manage')
    this.manage=JSON.parse(manage).type
    this.Withdrawable()
    this.loadData();
  }
  Withdrawable() {
    if (this.manage == 'admin') {
      // 商家类型
      businessApi.businessTypeList(1,9999)
              .then((res: any) => {
                this.businessTypeList = res.data.data.list;
              });
    } else {
      settlementApi.shopConfig()
              .then((res: any) => {
                this.shopConfig=res.data.data
              });
    }
  }
  loadData() {
    if(this.manage=='admin'){
      settlementApi.busSettExamine(this.searchMap,this.page,this.size)
        .then((res: any) => {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
          this.loading=false
        });
    }else{
      settlementApi.busSettlementList(this.page,this.size)
      .then((res: any) => {
        this.tableData = res.data.data.list
        this.total = res.data.data.total;
        this.loading=false
      });
    }
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.loadData();
  }
}
</script>

<style lang="scss">
.el-range-editor.el-input__inner{
  margin-right: 10px
}
.table-data {
  .user-info-item {
    width: 100%;
    display: flex;
    padding: 10px 0;
    span {
      display: inline-block;
    }
    span:first-of-type {
      width: 150px;
      text-align: right;
    }
    span:last-of-type {
      padding-left: 15px;
    }
  }
}
</style>
